<template>
	<view class="page-view">
		<view class="top-warp">
			<zx-nav title="发票信息" bg="#fff" fixedTop></zx-nav>
			<app-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></app-tabs>
		</view>
		<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :top="topH" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
			<!-- 数据列表 -->
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="solid-bottom item-hd">
						申请时间：
						<text class="text-black">{{ item.created_at }}</text>
					</view>
					<view class="solid-bottom item-bd">
						<view>
							发票抬头：
							<text class="text-black">{{ item.name }}</text>
						</view>
						<view class="margin-top-sm">
							税号：
							<text class="text-black">{{ item.number }}</text>
						</view>
						<view class="margin-top-sm">
							发票金额：
							<text class="text-red">{{ item.amount }}元</text>
						</view>
					</view>
					<view class="item-ft flex justify-between align-center">
						<view class="state" :class="[item.status == 3 ? 'text-green' : 'text-red']">
							{{ item.status_ }}
						</view>
						<view class="btn" @tap="navTo(item)">查看详情</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import AppTabs from '@/components/app-tabs.vue';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { mapState } from 'vuex';

export default {
	data() {
		return {
			tabIndex: 0,
			tabs: ['待开具', '已完成'],
			// topH: 95,
			list: [],
			downOption: {},
			upOption: {}
		};
	},
	components: {
		AppTabs
	},
	computed: {
		...mapState(['CustomBar']),
		topH() {
			return this.CustomBar + uni.upx2px(95)+'px';
		}
	},
	methods: {
		navTo(item) {
			uni.navigateTo({
				url: '/invoice/invoiceDetails?id=' + item.id
			});
		},
		tabChange(index) {
			this.tabIndex = index;
			this.downCallback();
		},
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
			// #ifdef MP-TOUTIAO
			this.mescrollInitByRef && this.mescrollInitByRef(); // 兼容字节跳动小程序 (mescroll-mixins.js)
			// #endif
			// 自动加载当前tab的数据
			this.mescroll && this.mescroll.triggerUpScroll();
		},

		upCallback(mescroll) {
			this.getorderlist();
		},
		downCallback() {
			this.mescroll && this.mescroll.resetUpScroll();
		},
		getorderlist() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize,
				status: this.tabIndex == 0 ? 1 : 3 //1待开具， 2撤销， 3已开具
			};
			let $me = this;
			this.$postAction(this.$api.invoicesList, {
				...param,
				noloading: true
			}).then(da => {
				if (da.data && da.data.length > 0) {
					let curPageData = da.data;
					this.mescroll.endBySize(curPageData.length, da.count);
					if (this.mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(curPageData); //追加新数据
				} else {
					this.list = [];
					this.mescroll.endSuccess(0, false);
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.page-view {
	background: #f4f4f4;

	.top-warp {
		position: absolute;
		top: 0;
		background: #fff;
		left: 0;
		width: 100%;
		z-index: 999;
	}

	.list {
		padding: 0 28rpx;
	}

	.item {
		background: #fff;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #848484;
		line-height: 40rpx;
		padding: 0 22rpx;

		.item-hd {
			padding: 32rpx 6rpx 28rpx;
		}

		.item-bd {
			padding: 24rpx 6rpx;
		}

		.item-ft {
			padding: 20rpx 6rpx;
		}

		.btn {
			width: 168rpx;
			height: 69rpx;
			background: linear-gradient(90deg, #ff8173 0%, #ff3543 100%);
			border-radius: 35rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #ffffff;
			text-align: center;
			line-height: 69rpx;
		}
	}
}
</style>
